<!--
 * @Author: lhl
 * @Date: 2021-12-30 08:33:15
 * @LastEditTime: 2022-01-06 18:18:12
 * @LastEditors: lhl
 * @Description: 监测点信息
 * @FilePath: \briup\teamwork\briup-webUI-2group-teamwork\am-ui\src\pages\am\monitor\Video.vue
 * 别乱动！
-->
<template>
  <div class="Monthly">
    <div class="content">
      <div class="left">
        <el-input v-model="keyWords" placeholder="请输入关键字" clearable @input="toHandler">
        </el-input>
        <!-- 工程设备树 -->
        <el-tree :data="edTree" :props="props" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right">
        <!-- {{list}} -->
        <!-- {{ params }} -->
        <!-- 判断工程是否有子树，没有则提示 请先选择工程下的设备-->
        <div v-if="list">
          <!-- 判断设备下是否有视频地址 -->
          <div v-if="resdata.video">
            <video :src="resdata.video" autoplay controls loop style="display: block; width: 90%; margin: 0 auto"></video>
          </div>
          <div v-else-if="!resdata.video" class="notice">该设备暂未绑定视频</div>
        </div>
        <div v-else class="notice">请先选择工程下的设备</div>
      </div>
    </div>
  </div>
</template>     
<script>
import { get } from '@/utils/request.js'

export default {
  data() {
    return {
      list: [],
      resdata: {},
      engineers: {},
      edTree: [],
      props: {
        label: 'name',
        value: 'id'
      },
      params: {
        page: 1,
        pageSize: 50
      },
      monthData: [],
      keyWords: '',
      value1: ''
    }
  },
  methods: {
    // 树形节点点击事件
    handleNodeClick(data) {
      this.list = data.engineer_id
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id
        }
        // 调用请求数据的方法
        this.findDeviceDetail()
      }
    },
    //查询所有工程名称
    findEngineername() {
      get('/engineer/pageQuery', {
        page: 1,
        pageSize: 10
      }).then(res => {
        this.engineers = res.data.list
      })
    },
    // 获取视频地址
    findDeviceDetail() {
      // console.log(this.params.device_id, '=======')
      get('/device/findDeviceDetail', {
        id: this.params.device_id
      }).then(res => {
        this.resdata = res.data
        // console.log(resdata);
      })
    },

    // 查询工程设备树
    findEngineerDeviceTree() {
      get('/engineer/findEngineerDeviceTree').then(res => {
        this.edTree = res.data
      })
    },
    MonthData() {},
    // 根据工程设备ID检索该月设备数据
    queryMonthData() {
      get('/monitor/queryMouthData', this.params).then(res => {
        this.monthData = res.data
      })
    },
    toSearchHandler() {
      this.findDeviceDetail()
    },
    //模糊搜索关键字
    toHandler() {
      if (this.keyWords == '') {
        this.findEngineerDeviceTree()
      }
      this.edTree = this.edTree.filter(item => item.name.match(this.keyWords))
    }
  },
  created() {
    // 先查询一下视频地址
    // this.findDeviceDetail()
    // 查询工程设备树
    this.findEngineerDeviceTree()
    // this.queryMonthData();
    this.findEngineername()
  }
}
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  /* position: fixed; */
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
.icon {
  display: block;
  width: 100%;
}
.head {
  background-color: #f4f4f4;
  height: 25px;
  font-size: 16px;
  line-height: 25px;
  padding-left: 20px;
}
</style>